import React, { Component } from 'react';
import { observable } from 'mobx';
import { observer, inject } from "mobx-react";
import { Button, message } from 'antd';
import FirstStep from './components/FirstStep/FirstStep'
import CategoryTable from '@/components/CategoryTable/CategoryTable'
import IntegrationArticle from '@/components/IntegrationArticle/IntegrationArticle'
import IntegrationMission from '@/components/IntegrationMission/IntegrationMission'
import IntegrationOthers from '@/components/IntegrationOthers/IntegrationOthers'
import './Distribution.less'

@inject('rootStore') @observer
class Distribution extends Component {
  @observable currentStep = 0;

  toNextStep = () => {
    const integrationStore = this.props.rootStore.integrationStore;
    switch (this.currentStep) {
      case 0:
        if (integrationStore.checkStepOne()) {
          this.currentStep = this.currentStep + 1;
        } else {
          message.error('Start Time Must Be Less Than End Time')
        }
        break;
      case 1:
        this.currentStep = this.currentStep + 1;
        break;
      default:
    }
  }

  toLastStep = () => {
    this.currentStep = this.currentStep - 1;
  }

  componentDidMount() {
    const integrationStore = this.props.rootStore.integrationStore;

    if (!integrationStore.categoryFiftyLoadSuccess) {
      integrationStore.toGetNewsCategoryFifty()
    }
    if (!integrationStore.templateLoadSuccess) {
      integrationStore.toGetTemplate()
    }
  }

  render() {
    const integrationStore = this.props.rootStore.integrationStore;

    return (
      <div className="page-content distribution">
        <FirstStep currentStep={this.currentStep} />
        {
          this.currentStep === 0 ?
          <div className="category-table">
            <div className="title-name pb16">Category:</div>
            <CategoryTable />
            <div className="category-article">
              <div className="article-name">Article:</div>
              <div className="article-container">
                <IntegrationArticle
                  firstArticleFrom={integrationStore.articleParam[0].minLimit}
                  firstArticleFromOnChange={integrationStore.firstArticleFromOnChange}
                  firstArticleIntegral={integrationStore.articleParam[0].awards[0].amount}
                  firstArticleIntegralOnChange={integrationStore.firstArticleIntegralOnChange}
                  secondArticleFrom={integrationStore.articleParam[1].minLimit}
                  secondArticleFromOnChange={integrationStore.secondArticleFromOnChange}
                  secondArticleTo={integrationStore.articleParam[1].maxLimit}
                  secondArticleToOnChange={integrationStore.secondArticleToOnChange}
                  secondArticleIntegral={integrationStore.articleParam[1].awards[0].amount}
                  secondArticleIntegralOnChange={integrationStore.secondArticleIntegralOnChange}
                  thirdArticleFrom={integrationStore.articleParam[2].minLimit}
                  thirdArticleFromOnChange={integrationStore.thirdArticleFromOnChange}
                  thirdArticleIntegral={integrationStore.articleParam[2].awards[0].amount}
                  thirdArticleIntegralOnChange={integrationStore.thirdArticleIntegralOnChange}
                />
                <Button
                  type="primary"
                  onClick={this.toNextStep}>Next</Button>
              </div>
            </div>
          </div>
          :
          null
        }
        {
          this.currentStep === 1 ?
          <div className="mission-table">
            <IntegrationMission
              loginIntegral={integrationStore.loginParam[0].awards[0].amount}
              loginIntegralOnChange={integrationStore.loginIntegralOnChange}
              signIntegral={integrationStore.signInParam[0].awards[0].amount}
              signIntegralOnChange={integrationStore.signIntegralOnChange}
              continuousSignList={integrationStore.continuousSignList}
              addSignInItem={integrationStore.addSignInItem}
              deleteSignItem={(index) => integrationStore.deleteSignItem(index)}
              signDaysOnChange={(e, index) => integrationStore.signDaysOnChange(e, index)}
              signDaysIntegralOnChange={(value, index) => integrationStore.signDaysIntegralOnChange(value, index)}
              signDaysPesoOnChange={(e, index) => integrationStore.signDaysPesoOnChange(e, index)}
              likeIntegral={integrationStore.likeShareParam[0].awards[0].amount}
              likeIntegralOnChange={integrationStore.likeIntegralOnChange}
              shareIntegral={integrationStore.likeShareParam[1].awards[0].amount}
              shareIntegralOnChange={integrationStore.shareIntegralOnChange}
              readRewardList={integrationStore.readRewardList}
              addReadRewardItem={integrationStore.addReadRewardItem}
              readArticleOnChange={(value, index) => integrationStore.readArticleOnChange(value, index)}
              readIntegralOnChange={(value, index) => integrationStore.readIntegralOnChange(value, index)}
              deleteReadItem={(index) => integrationStore.deleteReadItem(index)} />
              <div className="mt20">
                <Button
                  type="primary mr20"
                  onClick={this.toLastStep}>Back</Button>
                <Button
                  type="primary"
                  onClick={this.toNextStep}>Next</Button>
              </div>
          </div>
          :
          null
        }
        {
          this.currentStep === 2 ?
          <div className="others-table">
            <IntegrationOthers
              toLastStep={this.toLastStep}
              toConfrim={integrationStore.toConfrim}
              contributeIntegral={integrationStore.contributeParam[0].awards[0].amount}
              contributeIntegralOnChange={integrationStore.contributeIntegralOnChange}
              contributeList={integrationStore.contributeList}
              addcontributeItem={integrationStore.addcontributeItem}
              deleteContributeItem={(index) => integrationStore.deleteContributeItem(index)}
              articlesOnChange={(value, index) => integrationStore.articlesOnChange(value, index) }
              articlesIntegrationOnChange={(value, index) => integrationStore.articlesIntegrationOnChange(value, index)}
              paymentIntegral={integrationStore.paymentParam[0].awards[0].amount}
              paymentIntegralOnChange={integrationStore.paymentIntegralOnChange}
              paymentList={integrationStore.paymentList}
              addPaymentItem={integrationStore.addPaymentItem}
              deletePaymentItem={(index) => integrationStore.deletePaymentItem(index)}
              paymentOnChange={(value, index) => integrationStore.paymentOnChange(value, index)}
              paymentListIntegralOnChange={(value, index) => integrationStore.paymentListIntegralOnChange(value, index)} />
              <div className="mt20">
                <Button
                  type="primary mr20"
                  onClick={this.toLastStep}>Back</Button>
                <Button
                  type="primary"
                  onClick={integrationStore.toConfrim}>Confirm</Button>
              </div>
          </div>
          :
          null
        }
      </div>
    )
  }
}

export default Distribution;
